<template>
	<view class="container">
		<!-- s收货地址 -->
		<view class="address">
			<view class="address_info">
				<label for="">收件人:{{user.username}}</label>	
				<label for="">{{user.phone}}</label>
			</view>
			<view class="address_res">
				收货地址：<label for="">{{user.address}}</label>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="carts">
			
			<view class="cartsInfo" v-for="(item,index) in list" :key="item.id">
				<!-- 70px -->
				<view class="carts_detail">
					<view class="carts_image">
						<image :src="$baseUrl+item.img" mode=""></image>
					</view>
					<view class="carts_name">
						<view for="" style="font-size: 30rpx;">{{item.goodsname}}</view>
						
					</view>
					<view class="carts_price">
						<label for="">￥ {{item.price}}</label>
					</view>
				</view>
				<!-- 50px -->
				<view class="cart_num">
					<view class="">
						购买数量：
					</view>
					<view class="">
						<label for="" class="jian" @click="sub(index)">-</label>
						<label for="" class="num">{{item.num}}</label>
						<label for="" class="jia" @click="add(index)">+</label>
					</view>
				</view>
				<!-- 横线 -->
				<view class="xian"></view>
			</view>		
			
	
				
				
			<!-- 50px -->
			<view class="kuaidi">
				<label for="">配送方式</label>
				<label for="">XX快递</label>
			</view>
		</view>
		
		<!-- 优惠券 -->
		<view class="yhquan">
			<label for="">优惠券</label>
			<label for="" style="margin-right: 40rpx;">无可用</label>
		</view>
		<!-- jifen积分 -->
		<view class="jifen">
			<view class="use" >
				<label for="">使用积分</label>
			</view>
			<view class="input" style="margin-right: 40rpx;">
				<input type="text" value="" placeholder="输入积分"/>
				<label for="" class="input_use">使用</label>
				<label for="" class="input_keyi">可使用50积分</label>
			</view>
		</view>
		
		<!-- 具体详细 -->
		<view class="resDetail">
			<view class="">
				<label for="">商品金额</label>
				<label for="" style="margin-right:40rpx;color:red">￥{{total}}</label>
			</view>
			<view class="">
				<label for="">运费</label>
				<label for="" style="margin-right:40rpx;color:red">+￥0.00</label>
			</view>
			<view class="">
				<label for="">优惠券</label>
				<label for="" style="margin-right:40rpx;color:red">-￥0.00</label>
			</view>
			<view class="">
				<label for="">会员优惠</label>
				<label for="" style="margin-right:40rpx;color:red">-￥0.00</label>
			</view>
			<view class="">
				<label for="">积分抵扣</label>
				<label for="" style="margin-right:40rpx;color:red">-￥0.00</label>
			</view>
		</view>
		<!-- 实付金额 -->
		<view class="sfje">
			实付金额：<label for="" style="color:red">￥{{ total }}</label>
		</view>
		
		<!-- 确认订单按钮 -->
		<view class="btn">
			<!-- 点击提交订单按钮，发起支付请求 -->
			<button type="primary" @click="pay">提交订单</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				user:{username:"悟空",address:"花果山水帘洞24号",phone:"18203847564"},
				list:[],		//订单确认列表
			}
		},
		onLoad(){
			//页面加载，读取缓存
			var arr =uni.getStorageSync("confirm")||[]
			this.list=arr
		},
		computed:{
			total(){
				var result=0;
				this.list.forEach(item=>{
					result+=item.price*item.num
				})
				return result;
			}
		},
		methods:{
			//添加订单
			async pay(){
				let {token,uid}=uni.getStorageSync("userInfo");
				let {username,address,phone:userphone}=this.user;
				var arr=this.list.map(item=>{
					return item.id
				})
				var idstr=arr.join(",")
				var countmoney=this.total;
				var addtime=new Date().getTime()
				var countnumber=this.list.length;
				
				//发送请求
				var obj={username,userphone,address,uid,countmoney, countnumber,addtime}
				var params=JSON.stringify(obj)
				//请求接口
				var result =await this.$http("/api/orderadd",{ params,idstr},"GET",token)
				.catch(err=>{
					console.error(err)
				})
				//跳转到订单确认页
				if(result.data.code==200){
					uni.reLaunch({
						url:"/pages/order/order"
					})
				}
			},
			//数量增加
			add(index){
				this.list[index].num++
			},
			//数量减少
			sub(index){
				if(this.list[index].num<=1){
					return;
				}
				this.list[index].num--
			}
		}
	}
	
</script>
<style>
	@import url("../../common/css/confirm.css");
</style>
